<template>
  <div class="upload-container">
    <div class="img_list_wrapper fl">
      <dl v-for="(p, i) in images" :key="i">
        <dt><img :src="p.imgUrl"></dt>
        <i class="img-close-wrapper" @click="deleteImg(i)"/>
      </dl>
    </div>
    <div v-if="isUpload" class="fl upload_card">
      <upload
        class="avatar-uploader"
        v-if="images.length < length"
        type="picture-card"
        @success="handleSuccess"
      >
        <slot><i class="el-icon-plus avatar-uploader-icon"/></slot>
      </upload>
    </div>
  </div>
</template>

<script>
import Upload from '@/components/Upload/index'

const EVENT_SUCCESS = 'success'

export default {
  name: 'SingleImageUpload',
  components: { Upload },
  props: {
    images: {
      type: Array,
      default() {
        return []
      }
    },
    length: {
      type: Number,
      default: 5
    },
    time: {
      type: Boolean,
      default: true
    },
    isUpload: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      images1: [],
      pickerOptions: {
        shortcuts: [{
          text: '长期有效',
          onClick(picker) {
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', start)
          }
        }]
      }
    }
  },
  computed: {

  },
  methods: {
    setImages() {
      this.$emit(EVENT_SUCCESS, this.images)
    },
    handleSuccess(file) {
      this.images.push({
        name: file.name,
        imgUrl: file.response.data,
        time: ''
      })
      this.setImages()
    },
    deleteImg(i) {
      this.images.splice(i, 1)
      this.setImages()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .img_list_wrapper{
    dl{
      margin:0 15px 15px 0;
      float:left;
      position: relative;
      dt{
        width:174px;
        height:150px;
        img{
          width:100%;
          height: 100%;
        }
      }
      dd{
        text-align: center;
        margin: 10px 0 ;
        .el-date-editor.el-input{
          width:174px;
        }
      }
      i.img-close-wrapper {
        position: absolute;
        width: 21px;
        height:21px;
        background: url('../../assets/images/close.png') no-repeat;
        top:-6px;
        right: -6px;
        cursor: pointer;
      }
    }
  }
</style>
